<template>
  <div>
    <Echart
      :options="options"
      id="centreLeft1Chart"
      height="100%"
      width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  data () {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler (newData) {
        this.options = {
          legend: {
            top: 0,
            orient: "vertical",
          },
          tooltip: {
            trigger: "axis"
          },
          grid: {
            bottom: 50,
          },
          xAxis: {
            type: "category",
            position: "bottom",
            axisLine: true,
            axisLabel: {
              color: "rgba(255,255,255,.8)",
              fontSize: 12
            },
            data: newData.weekCategory
          },
          // 下方Y轴
          yAxis: {
            name:'分',
            nameLocation: "end",
            nameGap: 24,
            nameTextStyle: {
              color: "rgba(255,255,255,.5)",
              fontSize: 14
            },
            splitNumber: 4,
            axisLine: {
              lineStyle: {
                opacity: 0
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#fff",
                opacity: 0.1
              }
            },
            axisLabel: {
              color: "rgba(255,255,255,.8)",
              fontSize: 12
            }
          },
          series: newData.series
            // [{
              // name: "我的指标",
              // type: "line",
              // symbol: "emptyCircle",
              // symbolSize: 8,
              // itemStyle: {
              //     color: this.colorList.linearGtoA.colorA,
              //     width: 3
              // },
              // areaStyle: {
              //   normal: {
              //     color: this.colorList.linearGtoA.areaColorA
              //   }
              // },
              // data: newData.weekLineData,
              // markLine: {
              //   silent: true,
              //   data: [
              //     {
              //       type: "average",
              //       name: "平均值"
              //     }
              //   ],
              //   precision: 0,
              //   label: {
              //     normal: {
              //       formatter: "平均值: \n {c}"
              //     }
              //   },
              //   lineStyle: {
              //     normal: {
              //       color: "rgba(248,211,81,.7)"
              //     }
              //   }
              // },
              // tooltip: {
              //   position: "top",
              //   formatter: "{c} m",
              //   backgroundColor: "rgba(28,152,232,.2)",
              //   padding: 6
              // }
            // }]
        }
      },
      immediate: true,
      deep: true
    }
  }
};
</script>